import { observable } from "mobx";
import { IGuide } from "../../config/GuideCfg";
import { PrefabPath } from "../../config/PrefabPath";
import LayerBase from "../../core/common/LayerBase";
import GuideManager from "../../core/managers/GuideManager";
import UIManager from "../../core/managers/UIManager";
import { UserStore } from "../../core/store/UserStore";
import { observer } from "../../mobx/observer";

const { ccclass, property } = cc._decorator;
@ccclass
@observer

export default class GameMainLayer extends LayerBase {
    @property({ type: cc.Node, tooltip: '遮罩' })
    maskNode: cc.Node = null;
    @property({ type: cc.Node, tooltip: '旁白节点' })
    panelNode: cc.Node = null;
    @property({ type: cc.Node, tooltip: '旁白背景' })
    panelBg: cc.Node = null;
    @property({ type: cc.RichText, tooltip: '内容' })
    richText: cc.RichText = null;
    @property({ type: cc.Label, tooltip: '标题' })
    labTitel: cc.Label = null;
    @property({ type: cc.Node, tooltip: '手指动画' })
    fingerNode: cc.Node = null;

    configData: IGuide;
    clickNode: cc.Node = null;

    updateDisplay(guidData: IGuide) {
        GuideManager.Ins.curConfig = guidData;
        this.configData = guidData;
        this.labTitel.string = guidData.guideName;
        this.richText.string = guidData.contentText;
        if (guidData.nodeName) {
            let node = cc.find(guidData.nodeName, this.node);
            if (node) {
                this.clickNode = node;
            }
        }
    }
    async onShow() {
        this.labTitel.node.active = false;
        this.richText.node.active = false;
        this.showPanelEffect();
        this.showFingerMove();

    }
    private showPanelEffect(): Promise<null> {
        return new Promise((resolve, reject) => {
            cc.tween(this.panelBg)
                .set({
                    width: 0,
                    height: 0
                })
                .to(0.5, {
                    width: 550,
                    height: this.richText.node.height + 150
                })
                .call(() => {
                    this.labTitel.node.active = true;
                    this.richText.node.active = true;
                    resolve(null)
                })
                .start()
        })
    }

    private showFingerMove(): Promise<null> {
        if (!this.configData.showNodePos) {
            this.fingerNode.active = false;
            return;
        }
        return new Promise((resolve, reject) => {
            cc.tween(this.fingerNode)
                .set({
                    position: GuideManager.Ins.preFingerPos ? GuideManager.Ins.preFingerPos : this.fingerNode.position
                })
                .to(0.8, {
                    position: this.configData.showNodePos
                })
                .call(() => {
                    GuideManager.Ins.preFingerPos = this.configData.showNodePos
                    resolve(null)
                })
                .start()
        })
    }

    onLoad() {
        this.initEvent();

    }

    initEvent() {
        this.node.on(cc.Node.EventType.TOUCH_START, this.onTouchBg, this);
    }

    async onTouchBg(e: cc.Event.EventTouch) {
        if (this.configData.isForce) {
            let point = e.getLocation();
            let retWord = this.clickNode.getBoundingBoxToWorld();
            retWord.width = retWord.width <= 0 ? 0 : retWord.width;
            retWord.height = retWord.height <= 0 ? 0 : retWord.height;
            if (retWord.contains(point)) {
                this.node['_touchListener'].setSwallowTouches(false);
                UserStore.Ins.setGuide(this.configData.guideId);
                GuideManager.Ins.guideIng = false;
                if (this.configData.next) {
                    let nextInfo = GuideManager.Ins.nextGuideInfo
                    this.updateDisplay(nextInfo)
                    this.showFingerMove();
                } else {
                    UIManager.hide(PrefabPath.guideLayer);
                }
            } else {
                this.node['_touchListener'].setSwallowTouches(true);
            }
        } else {
            this.node['_touchListener'].setSwallowTouches(false);
            UserStore.Ins.setGuide(this.configData.guideId);
            GuideManager.Ins.guideIng = false;
            UIManager.hide(PrefabPath.guideLayer);
        }
    }
}